<template>
    <div class="setPermission">
        <el-dialog title="权限设置" :visible.sync="isDial" width="700px" :before-close='closeDialog'>
            <el-table :data="gridData" border  max-height="550" size="mini">
                <el-table-column property="date" label="菜单" width="200" >
                     <template slot-scope="scope">
                        <span v-if="scope.row.parentId!=0" style="padding:0px 10px"></span>
                        <el-checkbox v-model="scope.row.isPermission" @change="cha(scope.row)" >{{scope.row.menuName}}</el-checkbox>
                     </template>
                </el-table-column>
                <el-table-column property="address" label="数据权限">
                    <template slot-scope="scope" v-if="scope.row.isDataPermission!=0">
                        <el-checkbox :indeterminate="scope.row.isIndeterminate" v-model="scope.row.checkAll" @change="checkAlls(scope.row)" style="float:left;padding-right:10px;">全选</el-checkbox>
                        <el-checkbox-group v-model="scope.row.checkedCities" @change="CheckedCitiesChange(scope.row)">
                            <el-checkbox v-for="city in scope.row.adminDataPermissionVoList" :label="city.companyId" :key="city.companyId">{{city.name}}</el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-table-column>
            </el-table>
            <div class="foot">
                <el-button type="primary" size="mini" style="float:right" @click="savePermission">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {session} from '../../assets/session.js'
import { request } from "../../assets/request.js";
import Vue from 'vue';
export default {
    data(){
        return{
            isDial:false,
            gridData: [],
            checkAll: false,
            isIndeterminate: false,
            checked:'',
            rowInfo:'',
            selList:[],
            types:'',
        }
    },
    created(){
        this.$root.$on("setPermission", data => {
            if(data=='group'){
                this.types="group"
                this.selectListGroup()
            }else if(!this.gridData[0]){ //防止多次查询
                this.types=""
                this.rowInfo=data
                this.selectList(data.id)
            }
            this.isDial=true
        })
        this.$root.$on('selList',data=>{ //组件之间传值  将选中列表传过来 用于判断是否要设之权限
            this.selList=data
        })
    },
    methods:{
        checkAlls(val) { //点击全选
            let gridData=this.gridData
            for(let i in gridData){
                if(val.menuId==gridData[i].menuId){
                    gridData[i].checkedCities = val.checkAll ? gridData[i].cityOptions : [];
                    gridData[i].isIndeterminate = false;
                }
            }
        },
        CheckedCitiesChange(value) { //点击单选
            let checkedCount = value.checkedCities.length;
            let gridData=this.gridData
            for(let i in gridData){
                let obj=gridData[i]
                if(value.menuId==obj.menuId){
                    obj.checkAll = checkedCount === value.cityOptions.length;
                    obj.isIndeterminate = checkedCount > 0 && checkedCount < value.cityOptions.length;
                    this.$set(this.gridData, i, obj); //vue数组重新渲染
                    break;
                }
            }
        },
        cha(data){ //菜单点击
            let gridData=this.gridData
            if(data.parentId==0){ //判断是否是点击大类
                for(let i in gridData){
                    if(gridData[i].parentId==data.menuId){
                        gridData[i].isPermission=data.isPermission
                    }
                }
            }else{
                let arr=false //用来标识  除了当前项是否有其他的  同一大类下的子类被选中  
                for(let i in gridData){
                    if(gridData[i].menuId==data.parentId){
                        gridData[i].isPermission=data.isPermission
                    }
                    if(gridData[i].parentId==data.parentId && gridData[i].isPermission==true){
                        arr=true
                    }
                }
                if(arr){ //如果有其它的项被选中   则大类被勾中
                    for(let i in gridData){
                        if(gridData[i].menuId==data.parentId){
                            gridData[i].isPermission=true
                            break
                        }
                    }
                }
            }
        },
        savePermission(){ //权限保存
            this.isDial=false
            let that=this
            let url='admin/menu'
            let rowInfo=this.rowInfo
            let gridData=this.gridData
            let params={
                adminId:rowInfo.id,
                adminMenuList:[]
            }
            let selLis=this.selList
            if(this.types=="group"){ //判断是否是组设置权限
                params.adminIds=[]
                url="admin/menus"
                for(let i in selLis){
                    params.adminIds.push(selLis[i].id)
                }
                delete params.adminId //删除   单个id
                params.adminIds=params.adminIds.join(",")
            }
            this.gridData=[]
            for(let i in gridData){
                if(gridData[i].isPermission){
                    let obj={}
                    obj.dataPermission='';
                    obj.dataPermission=gridData[i].checkedCities.join(',')
                    obj.menuId=gridData[i].menuId;
                    params.adminMenuList.push(obj)
                }
                
            }
            request.ajaxPost({
                url,
                that,
                params,
                fn(res) {
                    console.log(res)
                }
            })
        },
        selectList(id){ //查询所有的菜单
            let url = `admin/menu/${id}`;
            let that=this   //解决this指向问题
            request.ajaxGet({
                url,
                that,
                fn(res){
                    let data=res.adminMenuList
                    for(let i in data){
                        data[i].isPermission=data[i].isPermission?true:false
                        data[i].checkedCities=[];
                        data[i].cityOptions=[]
                        let num=0 //用于判断全选是否选中
                        for(let j in data[i].adminDataPermissionVoList){
                            data[i].cityOptions.push(data[i].adminDataPermissionVoList[j].companyId)
                            if(data[i].adminDataPermissionVoList[j].isDataPermission==1){
                                data[i].checkedCities.push(data[i].adminDataPermissionVoList[j].companyId)
                                data[i].isIndeterminate=true //数据权限 全选半选中
                                num+=1
                            }else{
                                data[i].isIndeterminate=false 
                            }
                        }
                        if(num==data[i].adminDataPermissionVoList.length){
                            data[i].checkAll=true;  //数据权限 全选中
                        }else{
                            data[i].checkAll=false;  
                        }
                    }
                    that.gridData=that.menuArr(data)
                }
            })
        },
        selectListGroup(){  //权限设置组查询
            let url = "menu/all";
            let that=this   //解决this指向问题
            request.ajaxGet({
                url,
                that,
                fn(res){
                    let data=res
                    for(let i in data){
                        data[i].isPermission=false
                        data[i].checkedCities=[];
                        data[i].cityOptions=[]
                        data[i].isIndeterminate=false 
                        data[i].checkAll=false;  
                        data[i].menuName=data[i].name
                        data[i].menuId=data[i].id
                        data[i].adminDataPermissionVoList=data[i].departmentMenuVoList
                        for(let j in data[i].adminDataPermissionVoList){
                            data[i].adminDataPermissionVoList[j].companyId= data[i].adminDataPermissionVoList[j].id
                            data[i].cityOptions.push(data[i].adminDataPermissionVoList[j].id)
                            
                        }
                    }
                    that.gridData=that.menuArr(data)
                }
            })
        },
        menuArr(arr){ //菜单排序
            let menu=[]
            arr.sort((a,b)=>a.menuId-b.menuId)  //数组根据id排序
            for(let i in arr){ //取出大类
                arr[i].menu=[];
                if(arr[i].parentId==0){
                    menu.push(arr[i]);
                }
            }
            for(let i in arr){ //将子类存入 所对应的父类中
                for(let j in menu){
                    if(arr[i].parentId==menu[j].menuId){
                        menu[j].menu.push(arr[i])
                    }
                }
            }
            let menuList=[]
            for(let i in menu){ //将菜单按  
                menuList.push(menu[i])
                menuList=menuList.concat(menu[i].menu)
                menu[i].menu=''
            }
            return menuList
        },
        closeDialog(){
            this.isDial=false
            this.gridData=[]
        }
    }
}
</script>
<style lang="less" scoped>
.setPermission{
    .foot{
        overflow: hidden;
        margin:  30px 0px 10px 0px;
    }
}
</style>
